<template>
  <div class="blogs">
	<div style="width: 70%; margin: 0 auto;">
	<!--    <div class="content-header">
		  <h1>博客管理<small>查看博客详情</small></h1>
		  <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
			<el-breadcrumb-item >后台管理</el-breadcrumb-item>
			<el-breadcrumb-item>博客管理</el-breadcrumb-item>
			<el-breadcrumb-item>查看博客详情</el-breadcrumb-item>
		  </el-breadcrumb>
		</div> -->
		<el-page-header @back="goBack" content="博客详情页面">
		</el-page-header>
		<!--中间内容-->
		<div class="app-container">
			<div class="box">
				<!-- 头部的发博文的信息 -->
				<div class="blog_head">
					<div>
					  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 5px; color: rgb(64,126,221);">
						{{blog_information.user_id}}
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 8px;">
						<i class="el-icon-s-promotion"></i>
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 5px; color: rgb(142,142,142);">
						{{blog_information.time_}}
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 8px;">
						<i class="el-icon-view"></i>
					</div>
					<div style="text-align: center; line-height: 2.5em; margin-left: 5px; color: rgb(142,142,142);">
						{{blog_information.view_}}
					</div>
				</div>
				<!-- 中间的走马灯 -->
				<div class="demo-image__lazy">
					<el-carousel :interval="5000" arrow="always">
					    <el-carousel-item v-for="url in urls" :key="url">
					       <el-image  :src= url  style="height: 300px; width: 100%;"></el-image>
					    </el-carousel-item>
					</el-carousel>
				</div>
				<!-- 分割线 -->
				<el-divider></el-divider>
				<div style="text-align: right;">
					<el-tag
					    key="blog_information.resource"
					    type=""
					    effect="plain">
					    {{ blog_information.resource }}
					</el-tag>
				</div>
				<mavon-editor
					class="md"
					:subfield="false"
					:defaultOpen="'preview'"
					:toolbarsFlag="false"
					:editable="false"
					:scrollStyle="true"
					:ishljs="true"
					v-model="blog_information.content_markdown"
					codeStyle="monokai-sublime"
				/>
				<br/><br/><br/>
				<!--   赞赏   -->
				<div style="text-align: center;">
					<el-popover
					  placement="top-start"
					  width="230"
					  trigger="click">
					  <div style="display: flex;">
						<el-image
						style="width: 100px; height: 100px;margin: 0 auto;" 
						:src="require('@/assets/images/money_zhifubao.jpg')"
						fit="cover"></el-image>
						<el-image
						style="width: 100px; height: 100px;margin: 0 auto;"
						:src="require('@/assets/images/money_weixin.jpg')"
						fit="cover"></el-image>
					 </div>
					  <el-button slot="reference" type="primary">赞赏</el-button>
					</el-popover>
				</div>
				<!--  这是最后的footer  -->
				<br/><br/>
				<div style="background-color: rgb(252,255,245);">
					<el-divider></el-divider>
					<div style="display: flex;">
						<!-- 文字说明  -->
						<div>
							<ul><li>这是一个团体博客展示平台,在这里发博客的都是博主的"好朋友"。</li></ul>
							<ul><li>平台支持多用户,如果你也想在此博客发博文,可向博主申请个人账号。</li></ul>
							<ul><li>该博客平台展示的主要是一些基础性的科普知识。</li></ul>
							<ul><li>博主: 托马斯</li></ul>
							<ul><li>博主公众号: 小趴菜技术猿</li></ul>
							<ul><li>博主小程序: 人情世故记账本</li></ul>
						</div>
						<!-- 联系方式  -->
						<div style="margin: auto auto;">
							<el-image
							style="width: 200px; height: 200px;margin: 0 auto;"
							:src="require('@/assets/images/me.jpg')"
							fit="cover"></el-image>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br>
		<br>
	</div>
  </div>
</template>

<script>
 export default{
	data() {
		return{
			blog_information:{
				
			},
			circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
			urls:[
				"https://images.unsplash.com/photo-1594590713006-773c056b46ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQxfHxzcHJpbmd8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
				'https://images.unsplash.com/photo-1576643389950-64434aa6c7db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Njd8fHN1bW1lcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
				'https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
				'https://images.unsplash.com/photo-1453306458620-5bbef13a5bca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHdpbnRlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
			]
		}
	},
	created(){
		var that=this
		var blog=JSON.parse(sessionStorage.getItem("blog"))
		this.blog_information=blog
	},
	methods:{
		goBack() {
			this.$router.push({path: "/show_blog"});;
		}
	}
}
</script>

<style>
.blog_head{
	display: flex;
	text-align: center;
	height: 3em;
/* 	justify-content: center; */
	margin: 0 auto;
}

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
